<style lang="less" scoped>
.component {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 0.66rem;
    padding: 0.12rem 0;
    padding-right: 0.15rem;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 2000;
    box-shadow: 0px -1px 0px 0px rgba(224, 224, 224, 0.5);
    .container {
        position: relative;
        height: 100%;
        display: flex;
        > div {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .col1 {
        width: 50px;
        .check {
            position: relative;
            width: 17px;
            height: 17px;
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            box-sizing: border-box;
            img {
                display: none;
                width: 18px;
                height: 18px;
                position: relative;
                top: -1px;
                left: -1px;
            }
        }
    }
    .isSelAll {
        .check {
            overflow: visible;
            border: 0;
            img {
                display: block;
            }
        }
    }
    .col2 {
        width: 0.7rem;
        flex-direction: column;
        align-items: flex-start !important;
        color: #1c1c1c;
        font-size: 0.14rem;
        .num {
            font-size: 0.12rem;
        }
    }
    .col3 {
        width: 0.9rem;
    }
    .col4 {
        flex: 1;
        padding-left: 0.15rem;
    }
    .btn {
        border-radius: 6px;
        font-size: 0.14rem;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .reject {
        color: #1b88ee;
        border: 1px solid #1b88ee;
    }
    .disable {
        color: #e0e0e0 !important;
        border-color: #e0e0e0 !important;
    }
    .resovle {
        background-color: #1b88ee;
        color: #ffffff;
    }
}
</style>
<template>
    <div class="component">
        <div class="container">
            <div
                class="col1"
                @click="selAll"
                :class="{'isSelAll' : pageData.selCount == pageData.len}"
            >
                <div class="check">
                    <img src="@/assets/icon/icon_sel.png" alt />
                </div>
            </div>
            <div class="col2">
                <div>全选</div>
                <div class="num">{{ pageData.selCount || 0 }}/{{ pageData.len }}</div>
            </div>
            <div class="col3">
                <div
                    class="btn reject"
                    :class="{'disable': pageData.selCount != 1}"
                    @click="clickReject"
                >驳回</div>
            </div>
            <div class="col4">
                <div class="btn resovle" @click="clickResovle">通过</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            isSelAll: false
        };
    },
    props: {
        pageData: {
            tppe: Object,
            default: function() {
                return {};
            }
        }
    },
    methods: {
        clickReject() {
            this.$emit("onReject");
        },
        clickResovle() {
            this.$emit("onResovle");
        },
        selAll() {
            var pageData = this.pageData;
            // 已经全选， 需要全部取消
            if (pageData.selCount == pageData.len) {
                this.$emit("onSellAll", false);
            } else {
                this.$emit("onSellAll", true);
            }
        }
    },
    mounted() {}
};
</script>
